<template>
  <!-- 关注的用户信息卡片 -->
  <div class="fanInfo-card">
    <!-- 用户头像 -->
    <div class="fan-avatar">
      <van-image class="avatar" round :src="this.idol.avatar" fit="cover" />
    </div>
    <!-- 用户信息 -->
    <div class="fan-Info">
      <span>{{ idol.username }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Idolcard",

  props: {
    idol: {
      type: Object,
    },
  },

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style scoped>
/**关注卡片 样式css*/
.fanInfo-card {
  width: 350px;
  height: auto;
  margin: 10px auto;
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
}

.fan-avatar {
  width: 60px;
  height: 60px;
  padding: 20px;
}

.avatar {
  width: 60px;
  height: 60px;
}

.fan-Info {
  height: 60px;
  padding: 20px 0;
}

.fan-Info span {
  font-size: 18px;
}

/**关注卡片 样式css*/
</style>